// Load markdown from path to a container.
function display_markdown(path, container_id="markdown-container") {
	var xmlhttp;
	if (window.XMLHttpRequest) {  // IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	}
	else {  // IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var text = xmlhttp.responseText;
			var converter = new showdown.Converter({tables: true});  // Enable showdown's table support.
			var html = converter.makeHtml(text);
			document.getElementById(container_id).innerHTML = html;

			set_image_onclick(container_id);

			// Unfortunately, picture bed doesn't return picture intime.
			// Or user's network maybe not good.
			// If don't do this. Some picture doesn't display somtime. @_@
			update_image(container_id);
			var max_time = 30, current_time = 0;  // Counter
			function back_method() {
				update_image(container_id);
				current_time += 1;
				if (current_time >= max_time) {
					clearInterval(back);
				}
			}
			var back = setInterval(back_method, 2000);
		}
		else {
			console.log('Markdown load failed.')
		}
	}
	xmlhttp.open("GET", path, true);
	xmlhttp.send();
}

// Load tutorial list from path to list-container.
function load_list(path = './list-body.hhh', container_id="list-container") {
	var xmlhttp;
	if (window.XMLHttpRequest) {  // IE7+, Firefox, Chrome, Opera, Safari 
		xmlhttp = new XMLHttpRequest();
	}
	else {  // IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var text = xmlhttp.responseText;
			document.getElementById(container_id).innerHTML = text;

			set_image_onclick();
		}
	}
	xmlhttp.open("GET", path, true);
	xmlhttp.send();
}

// Show or hide tutorial list. (Mobile)
function show_mobile_list(container_id='list-container') {
	var mobile_list = document.getElementById(container_id);
	if (mobile_list.style.display == 'block') {
		mobile_list.style.display = 'none';
	}
	else {
		mobile_list.style.display = 'block';
	}
}

// Update img src in markdown-container. To prevent picture load failed.
function update_image(container_id='markdown-container') {
	var imgs = document.getElementById(container_id).querySelectorAll('img');
	for (var idx = 0; idx < imgs.length; idx += 1) {
		imgs[idx].src = imgs[idx].src;
	}
	console.log('Image Updated.');
}

// Set onclick attribute of imgs in a specific container.
function set_image_onclick(container_id='main-content-container') {
	var image_magnifier = document.getElementById('image-magnifier');

	var imgs = document.getElementById(container_id).querySelectorAll('img');  // img in container only.
	var image_magnifier_content = document.getElementById("image-magnifier-content");
	for (var idx = 0; idx < imgs.length; idx += 1) {
		imgs[idx].onclick = function() {
			image_magnifier.style.display = "block";
			image_magnifier_content.src = this.src;
		}
	}

	image_magnifier.onclick = function() {
		image_magnifier.style.display = "none";
	}
}
